<script lang="ts" setup>
import { QForm, type FormItemRows } from '@meetjs/element-plus-kit'
import { type FormRules } from 'element-plus'
import type { IGetDictsRes } from '@/api/system/dict/type'
import { getConfig, addConfig, updateConfig } from '@/api/system/config/index'
import type { ConfigParams } from '@/api/system/config/type'

const props = defineProps<{
	sysYesNo: IGetDictsRes
}>()
const emits = defineEmits<{
	refresh: []
}>()

const visible = ref(false)
const loading = ref(false)
const title = ref('新增参数')
const formRef = ref()

const baseFormData: ConfigParams = {
	configName: '',
	configKey: '',
	configValue: '',
	configType: 1,
	remark: ''
}
const dialogFormValue = ref<ConfigParams>({ ...baseFormData })
// const sysYesNo = ref<IGetDictsRes>([])

const dialogOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '参数名称',
		prop: 'configName'
	},
	{
		type: 'input',
		label: '参数键名',
		prop: 'configKey'
	},
	{
		type: 'input',
		label: '参数键值',
		prop: 'configValue'
	},
	{
		type: 'radio',
		label: '系统内置',
		prop: 'configType',
		options: []
	},
	{
		type: 'textarea',

		label: '备注',
		prop: 'remark',
		attrs: {
			rows: 3
		}
	}
])

watch(
	() => props.sysYesNo,
	() => {
		dialogOptions.value[3].options = props.sysYesNo
	}
)
const rules = reactive<FormRules<{ [k: string]: any }>>({
	configName: [
		{
			required: true,
			message: '请输入参数名称'
		}
	],
	configKey: [
		{
			required: true,
			message: '请输入参数键名'
		}
	],
	configValue: [
		{
			required: true,
			message: '请输入参数键值'
		}
	]
})

const init = async (operationType: 'add' | 'edit', editForm?: ConfigParams) => {
	visible.value = true
	title.value = operationType === 'add' ? '新增参数' : '编辑参数'

	if (operationType === 'edit' && editForm) {
		dialogFormValue.value = { ...editForm }

		// 如果有id，获取详细信息
		if (editForm.id) {
			loading.value = true
			try {
				const { data } = await getConfig(editForm.id)
				dialogFormValue.value = { ...data }
			} catch (error) {
				console.error('获取参数信息失败:', error)
				ElMessage.error('获取参数信息失败，请重试')
			} finally {
				loading.value = false
			}
		}
	} else {
		dialogFormValue.value = { ...baseFormData }
	}

	// 清理表单验证状态
	setTimeout(() => {
		formRef.value?.clearValidate()
	})
}

const submit = () => {
	formRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			loading.value = true
			try {
				const isAdd = title.value === '新增参数'
				const apiFunc = isAdd ? addConfig : updateConfig
				await apiFunc({ ...dialogFormValue.value })
				const message = isAdd ? '新增成功' : '修改成功'
				ElMessage.success(message)
				visible.value = false
				emits('refresh')
			} catch (error) {
				console.error('参数操作失败:', error)
				ElMessage.error('操作失败，请重试')
			} finally {
				loading.value = false
			}
		}
	})
}

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="600px"
	>
		<QForm
			ref="formRef"
			label-width="80px"
			:model="dialogFormValue"
			:form-options="dialogOptions"
			:rules="rules"
			:required="true"
		/>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="submit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>

<style lang="scss" scoped></style>
